<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8"/>

        <title>Tooltip</title>

        <link rel="stylesheet" type="text/css" href="../../../../dist/joint.css" />
        <link rel="stylesheet" type="text/css" href="../tooltip.css" />
        
        <style>
            body { padding: 100px; }
            label { display: inline-block; margin: 50px; cursor: pointer }
        </style>
    </head>
    <body>

        <label class="top-tooltip">Hover to see top tooltip</label>
        <label class="left-tooltip">Hover to see left tooltip</label>
        <label class="right-tooltip">Hover to see right tooltip</label>
        <label class="bottom-tooltip">Hover to see bottom tooltip</label>

        <script src="../../../../dist/joint.js"></script>

        <script src="../joint.ui.Tooltip.js"></script>

        <script src="./index.js"></script>

    </body>
</html>
